/**
 * 选择器 - 封装动画
 */
import React, {useEffect, useCallback} from 'react'
// prettier-ignore
import {
  StyleSheet,
  View,
  Animated,
  TouchableWithoutFeedback
} from 'react-native'

import {RXFadeAnimation, RXSlideAnimation} from 'react-native-rxdialog'

import PropTypes from 'prop-types'

const OverlayAnimal = new RXFadeAnimation()
const PickerAnimal = new RXSlideAnimation({slideFrom: 'bottom'})

const PickerCore = props => {
  const {visible, children, overClickEnable, superCallBack, ...others} = props

  const _doAnimal = (toValue = 0, onFinished = () => {}) => {
    OverlayAnimal.toValue(toValue)
    PickerAnimal.toValue(toValue, onFinished)
  }

  useEffect(() => {
    // Similar to componentDidMount and componentDidUpdate:
    _doAnimal(1, () => {})
    // console.log('pickerCore visible=', visible)
  })

  const _pressHandler = useCallback(
    (action = 0) => {
      console.log('pressHandler->action=>', action)
      if (action !== 0) {
        _doAnimal(0, () => {
          if (superCallBack) {
            superCallBack(action)
          }
        })
      }
    },
    [superCallBack],
  )

  let newStyle = styles.container
  if (visible === false) {
    newStyle = styles.hidden
  }
  // console.log('PickerCore - newStyle=', newStyle)
  // console.log('PickerCore - props=', props)

  return (
    <View style={newStyle} {...others}>
      <ViewOverlay overClickEnable={overClickEnable} superCallBack={_pressHandler} />
      <ViewContent>{children}</ViewContent>
    </View>
  )
}

PickerCore.prototype = {
  visible: PropTypes.bool,
  overClickEnable: PropTypes.bool,
  superCallBack: PropTypes.func,
}

PickerCore.defaultProps = {
  visible: false,
  overClickEnable: true,
  superCallBack: e => {},
}
export default PickerCore

const ViewContent = p => {
  const {style, children} = p
  // console.log('PickerCore - ViewContent - style=', style)
  return (
    <Animated.View style={[styles.dialog, PickerAnimal.animations, style]}>
      {children}
    </Animated.View>
  )
}

const ViewOverlay = ({style, overClickEnable, superCallBack}) => {
  // console.log('PickerCore - ViewOverlay - style=', style)
  return (
    <Animated.View style={[styles.overlay, OverlayAnimal.animations, style]}>
      <TouchableWithoutFeedback
        onPress={() => {
          if (overClickEnable) {
            console.log('tyles.overlay=', styles.overlay, styles.overlayView)
            superCallBack(-2)
          }
        }}>
        <View style={styles.overlay} />
      </TouchableWithoutFeedback>
    </Animated.View>
  )
}

const styles = StyleSheet.create({
  hidden: {
    position: 'absolute',
    top: -10000,
    left: 0,
    width: 0,
    height: 0,
  },
  container: {
    ...StyleSheet.absoluteFillObject,
    alignItems: 'center',
    justifyContent: 'flex-end',
    overflow: 'visible', // hidden  visible scroll
    zIndex: 2000,
  },
  overlay: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: 'rgba(0,0,0,0.3)',
  },
  dialog: {
    position: 'absolute',
    overflow: 'visible', // hidden  visible scroll
    left: 0,
    right: 0,
  },
})
